<template>
  <div class="header-wrapper">
    <div class="header-menu">
      <span v-for="item in modules" :key="item.id">
        <a-button
          :class="{ active: route.fullPath == item.path }"
          class="menu-item"
          type="text"
          @click="gotoPath(item.path)"
        >{{ item.label }}</a-button
        >
      </span>
    </div>
  </div>
</template>

<script setup>
import { modules } from '@/commons/modules'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 去指定页面
const gotoPath = (path) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.header-wrapper {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
}

.header-menu {
  max-width: 1200px;
  margin: 0 auto;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;

  .menu-item {
    margin: 0 20px;
    font-size: 15px;
    padding: 4px 2px;
    transition: all 0.3s ease;
    border-radius: 0;
    position: relative;

    &:hover {
      color: #1675fc;
    }
  }

  .active {
    color: #1675fc;
    font-weight: 500;
    border-bottom: 2px solid #1675fc;
  }
}
</style>
